<template>
  <KView class="coupon-tao-pwd">
    <KView class="coupon-tao-pwd-close clearfix">
      <KView @click="toCloseDialog">
        <sys-svg name="close"></sys-svg>
      </KView>
    </KView>
    <KView class="coupon-tao-pwd-data">
      <KView class="coupon-tao-pwd-title">您的淘口令已生成</KView>
      <KView>
        <cus-text class="coupon-tao-pwd-text" :selectable="true" :text="pwd"></cus-text>
      </KView>
    </KView>
    <KView class="coupon-tao-pwd-footer">
      <KView @click="toCloseDialog">不领取了</KView>
      <KView style="color:#59c264" @click="copyPwd">复制</KView>
    </KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      pwd: {
        type: String,
        required: true
      }
    },

    methods: {
      toCloseDialog() {
        this.$emit('close-dialog');
      },

      copyPwd() {
        let pwd = this.pwd;
        this.$api.setClipboardData({
          data: pwd
        });
      }
    },

    data() {
      return {};
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .coupon-tao-pwd {
    background: #ffffff;
    padding-top: formatPx(26);
    border: 1px solid #aeaeae;
    border-radius: 6px;

    .coupon-tao-pwd-close {
      padding: 0 formatPx(20);

      >div {
        float: right;
        width: formatPx(30);
        height: formatPx(30);
        padding: formatPx(5) formatPx(10);
      }
    }

    .coupon-tao-pwd-data {
      position: relative;
      padding: formatPx(30) formatPx(16) formatPx(20);
      margin: formatPx(26) formatPx(20) formatPx(30);
      border: 1px solid #999999;

      .coupon-tao-pwd-title {
        position: absolute;
        font-size: formatPx(30);
        text-align: center;
        height: formatPx(36);
        line-height: formatPx(36);
        width: 9em;
        left: calc(50% - 4.5em);
        top: formatPx(-19);
        background: #ffffff;
      }

      .coupon-tao-pwd-text {
        color: #999999;
        font-size: formatPx(26);
      }
    }

    .coupon-tao-pwd-footer {
      height: formatPx(80);
      border-top: 1px solid #b3b9c2;
      display: flex;

      >div {
        flex: 1;
        border-right: 1px solid #b3b9c2;
        line-height: formatPx(80);
        font-size: formatPx(30);
        text-align: center;

        &:last-child {
          border-right: none;
        }
      }
    }
  }

</style>
